<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { NImage, NImageGroup, NSelect, NSpace } from 'naive-ui'
import { getPathList, getSvgList } from '@/api'

interface FileInfo {
  name: string
  path: string
  url: string
}

interface PathInfo {
  name: string
  path: string
  pathId: string
}

const filelist = ref<FileInfo[]>()
const pathlist = ref<PathInfo[]>()
const currentPathId = ref('default')

const options = ref([
  {
    label: '默认11',
    value: 'default',
  },
])

async function getList() {
  filelist.value = []
  const { data } = await getSvgList<{ fileList: FileInfo[] }>(currentPathId.value)
  filelist.value = data.fileList
}

async function getPath() {
  const { data } = await getPathList<{ pathList: PathInfo[] }>()
  pathlist.value = data.pathList
  options.value = []
  for (let i = 0; i < data.pathList.length; i++) {
    const element = data.pathList[i]
    options.value.push({
      label: `${element.name}(${element.path})`,
      value: element.pathId,
    })
  }
}

watch(() => currentPathId.value, () => {
  console.log('目录变革', currentPathId.value)
  getList()
})

onMounted(() => {
  getPath()
  getList()
})
</script>

<template>
  <div class="m-5">
    <div class="flex items-center">
      <div class="w-auto mr-2">
        图标库
      </div>
      <div class="w-[500px] mr-2">
        <NSelect v-model:value="currentPathId" :options="options" />
      </div>
      <!-- <div>
        <NButton>添加新的目录</NButton>
      </div> -->
    </div>

    <div class="mt-5">
      <NImageGroup>
        <NSpace>
          <div
            v-for=" (k, index) in filelist"
            :key="index"
          >
            <NImage
              preview-disabled
              width="80"
              :src="k.url"
            />

            <div class="w-[100px]">
              {{ k.name }}
            </div>
          </div>
        </NSpace>
      </NImageGroup>
    </div>
  </div>
</template>
